<template>
  <div class="container">
    <div class="btnClose">
      <i class="iconfont iconicon-test"></i>
    </div>
    <div class="logo">
      <i class="iconfont iconnew"></i>
    </div>

    <AuthInput
      inputType="text"
      placeholder="用户名 / 手机号"
      err_message="请输入合法内容"
      @valueChanged="setUsername"
      :rule="/\d{5,11}/"
    ></AuthInput>
    <AuthInput
      inputType="password"
      placeholder="密码"
      err_message="请输入合法密码"
      @valueChanged="setPassword"
      :rule="/\d{3,8}/"
    ></AuthInput>

    <AuthBtn @clicked="submitlogin" btnText="登录"></AuthBtn>
  </div>
</template>

<script>
import AuthInput from "@/components/AuthInput";
import AuthBtn from "@/components/AuthBtn";
export default {
  components: {
    AuthInput,
    AuthBtn
  },
  data() {
    return {
      username: "",
      password: ""
    };
  },
  methods: {
    submitlogin() {
      if (!this.username || !this.password) {
        this.$toast("请输入完整信息");
        return;
      }
      this.$axios({
        url: "/login",
        method: "post",
        data: {
          username: this.username,
          password: this.password
        }
      })
        .then(res => {
          const { data, message, statusCode } = res.data;
          // // console.log(res);
          // if (statusCode || statusCode == 401) {
          //   this.$toast.fail(message);
          // } else {
            this.$toast.success(message);

            localStorage.setItem("token", data.token);
            localStorage.setItem("userId", data.user.id);
            this.$router.replace("/Personal");
          // }
        })
        .catch(err => {
          console.log("处理错误");
        });
    },
    setUsername(username) {
      this.username = username;
    },
    setPassword(password) {
      this.password = password;
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  padding: 6.667vw;
}
.btnClose {
  i {
    font-size: 7.778vw;
  }
}
.logo {
  display: flex;
  justify-content: center;
  // text-align: center;
  i {
    font-size: 35vw;
    color: red;
  }
}
</style>